/**
* Created by wl
* 项目管理>持有中-详情页-财务数据-编辑预警配置
*/
<template>
    <el-dialog 
        :visible.sync="dialogVisible"
        :show-close="false">
        <span slot="title">
            <span class="el-title">公式编辑:</span>
            <span class="el-name">
                公式名称
                <el-input v-model="itemFinanceRemind.title"></el-input>
            </span>
        </span>        
        <el-form :model="itemFinanceRemind" :rules="rules" ref="ruleForm">
            <el-row :gutter="30">
                <el-col :span="10">
                    <el-form-item label="数据源" :label-width="formLabelWidth">
                        <el-select placeholder="请选择" v-model="itemFinanceRemind.remindType" @change="getKeyList">
                            <el-option v-for="item in financeType" :label="item.name" :value="item.id"
                                    :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参数速查" :label-width="formLabelWidth">
                        <el-input type="text" v-model="seekInfo" @input="seek(seekInfo)"></el-input>
                    </el-form-item>
                    <el-card class="box-card">
                        <p v-if="itemFinanceRemind.remindType === ''">请先选择数据源</p>
                        <p v-else v-for="(item, index) in keys" :key="index" @click="selectParameter($event)">{{item}}</p>
                    </el-card>
                </el-col>
                <el-col :span="14">
                    <el-select placeholder="请选择" v-model="itemFinanceRemind.contrastiveValue">
                        <el-option v-for="item in alarmDate" :label="item.name" :value="item.id"
                                :key="item.id">
                        </el-option>
                    </el-select>
                    <span @click="chooseType('An')" :class="['el-btn', {'el-nochoose': !flag1, 'el-choose': flag1 }]">同 比</span>
                    <span :class="['el-btn', {'el-nochoose': !flag2, 'el-choose': flag2 }]" v-if="itemFinanceRemind.contrastiveValue!==0" @click="chooseType('Mom')">环 比</span>
                    <el-card class="inner-box">
                        <p>{{itemFinanceRemind.remindKey}}
                            {{alarmDate[itemFinanceRemind.contrastiveValue].name}}
                            {{alarmType[itemFinanceRemind.contrastiveType] == '比值' ? '' : alarmType[itemFinanceRemind.contrastiveType]}}</p>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="el-tip ca-m-t-28">
                <p>说明:不设置值,表示该无改条件,例如关注设置了值,告警未设置值,表示只有关注,无预警</p>
            </el-row>
            <el-row class="ca-m-t-28">
                <el-col :span="10">
                    <el-row>
                        <el-col :span="8">
                            <el-button type="warning">关 注</el-button>
                        </el-col>
                        <el-col :span="13">
                            <el-select placeholder="请选择" v-model="itemFinanceRemind.symbol2">
                                <el-option v-for="item in symbols" :label="item.label" :value="item.label"
                                        :key="item.value"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="threshold2">
                        <el-input type="input" v-model="itemFinanceRemind.threshold2"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="threshold22">
                        <el-input type="input" v-if="itemFinanceRemind.symbol2=='介于'" v-model="itemFinanceRemind.threshold22" :label-width="inputWid"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="ca-m-t-28">
                <el-col :span="10">
                    <el-row>
                        <el-col :span="8">
                            <el-button type="danger">告 警</el-button>
                        </el-col>
                        <el-col :span="13">
                            <el-select placeholder="请选择" v-model="itemFinanceRemind.symbol1">
                                <el-option v-for="item in symbols" :label="item.label" :value="item.label"
                                        :key="item.value"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="threshold1">
                        <el-input type="input" v-model="itemFinanceRemind.threshold1" :label-width="inputWid"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="" prop="threshold11">
                    <el-input type="input" v-if="itemFinanceRemind.symbol1=='介于'" v-model="itemFinanceRemind.threshold11" :label-width="inputWid"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer align-center">
            <el-button type="primary" @click="save">创 建</el-button>
            <el-button @click="close">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            var isNumber = (rule, value, callback) => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字'));
                } else {
                    callback();
                }
            };
            return {
                seekInfo: '',
                formLabelWidth: '90px',
                inputWid: '50px',
                serviceType: this.$store.state.user.dictionaryMap.itemServiceType,
                financeType: [
                    {
                        id: '1',
                        name: '利润表'
                    },
                    {
                        id: '2',
                        name: '负债表'
                    },
                    {
                        id: '3',
                        name: '现金流量表'
                    },
                    {
                        id: '4',
                        name: '其他'
                    }
                ],
                // financeType: this.$store.state.user.dictionaryMap.financeType, //数据源 内容类型 1:利润表 2:资产负债表  3:现金流量表  4：其他
                keysList: [], //可以预警的key列表
                keys: [],
                flag1: false, //同比
                flag2: false, //环比
                alarmType: ['比值', '环比', '同比'],
                alarmDate: [
                    {
                        name: '按年',
                        id: 0,
                    },
                    {
                        name: '半年',
                        id: 1,
                    },
                    {
                        name: '按季度',
                        id: 2,
                    },
                ],
                symbols: [
                    {
                        label: '>',
                        value: 1
                    },
                    {
                        label: '>=',
                        value: 2
                    },
                    {
                        label: '=',
                        value: 3
                    },
                    {
                        label: '<',
                        value: 4
                    },
                    {
                        label: '<=',
                        value: 5
                    },
                    {
                        label: '介于',
                        value: 6
                    }
                ],
                itemFinanceRemind: {
                    contrastiveType: 0, //0：比值 1:环比 2:同比
                    contrastiveValue: 0, //0：年报 1:半年报 2:季度报
                    id: '',
                    itemId: this.$route.params.itemId, //项目id
                    remindKey: '', //预警/关注字段
                    remindStatus: 1, //预警状态：1为启用中 0为停用
                    remindTime: '', //预警起始时间 暂不传
                    remindType: '', //文件类型 1：利润表 2：资产负债表 3：现金流量表 4：其他
                    symbol1: '>', //预警运算符
                    symbol2: '>', //关注运算符
                    threshold1: null, //预警阈值
                    threshold11: null, //第二个预警阈值
                    threshold2: null, //关注阈值
                    threshold22: null, //第二个关注阈值
                    title: '', //预警/关注标题
                },
                rules: {
                    threshold1: [
                        {validator: isNumber, trigger: 'change,blur'}
                    ],
                    threshold11: [
                        {validator: isNumber, trigger: 'change,blur'}
                    ],
                    threshold2: [
                        {validator: isNumber, trigger: 'change,blur'}
                    ],
                    threshold22: [
                        {validator: isNumber, trigger: 'change,blur'}
                    ],
                }
            }
        },
        watch: {
        },
        props: {
            dialogVisible: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
            remindId: {
                type: String,
                default: function () {
                    return '';
                }
            },
        },
        created() {
        },
        mounted() {
            this.getKeyList()
            if (this.remindId) {
                this.getList(this.remindId)
            }
        },
        methods: {
            close() {
                this.$emit('close')
            },
            // 参数速查
            seek(info) {
                if (info === '') {
                    this.keys = this.keysList
                } else {
                    let searchKeys = []
                    this.keysList.map(item => {
                        if (item.indexOf(info) !== -1) {
                            searchKeys.push(item)
                        }
                    })
                    this.keys = searchKeys
                }
            },
            // 选择同比还是环比
            chooseType(type) {
                if (type === 'An') { //同比
                    if (!this.flag1) {
                        this.itemFinanceRemind.contrastiveType = 2
                        this.flag2 = false
                        this.flag1 = true
                    } else {
                        this.itemFinanceRemind.contrastiveType = 0
                        this.flag1 = false
                        this.flag2 = false
                    }
                } else { //环比
                    if (!this.flag2) {
                        this.itemFinanceRemind.contrastiveType = 1
                        this.flag1 = false
                        this.flag2 = true
                    } else {
                        this.itemFinanceRemind.contrastiveType = 0
                        this.flag1 = false
                        this.flag2 = false
                    }
                }
            },
            // 获取可查看的预警列表
            getList(id) {
                apiHttp(api.CHECK_REMIND, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        ret.data.map(item => {
                            if (id === item.id) {
                                this.itemFinanceRemind = item
                                this.getKeyList()
                            }
                        })
                    }
                })
            },
            // 获取key列表
            getKeyList() {
                apiHttp(api.REMIND_LIST, {itemId: this.$route.params.itemId, financeType: this.itemFinanceRemind.remindType}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.keysList = ret.data.keys
                        this.keys = ret.data.keys
                    }
                })
            },
            // 选择参数
            selectParameter(e) {
                this.itemFinanceRemind.remindKey = e.target.innerText
            },
            save() {
                // 校验
                if (!this.itemFinanceRemind.title) {
                    this.$message({
                        message: '请输入公式名称',
                        type: 'error',
                        center: true
                    });
                    return false;
                }
                if (!this.itemFinanceRemind.remindType) {
                    this.$message({
                        message: '请选择数据源',
                        type: 'error',
                        center: true
                    });
                    return false;
                }
                if (!this.itemFinanceRemind.remindKey) {
                    this.$message({
                        message: '请选择预警/关注字段',
                        type: 'error',
                        center: true
                    });
                    return false;
                }
                if (this.itemFinanceRemind.threshold1 === '' && this.itemFinanceRemind.threshold2 === '' || this.itemFinanceRemind.threshold1 === null && this.itemFinanceRemind.threshold2 === null || this.itemFinanceRemind.threshold1 === null && this.itemFinanceRemind.threshold2 === '' || this.itemFinanceRemind.threshold1 === '' && this.itemFinanceRemind.threshold2 === null ) {
                    this.$message({
                        message: '请设置阈值',
                        type: 'error',
                        center: true
                    });
                    return false;
                } else if ((this.itemFinanceRemind.symbol1 === '介于' && !this.itemFinanceRemind.threshold11) || (this.itemFinanceRemind.symbol2 === '介于' && !this.itemFinanceRemind.threshold22)) {
                    this.$message({
                        message: '请设置阈值',
                        type: 'error',
                        center: true
                    });
                    return false;
                }
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let query = {
                            itemFinanceRemind: this.itemFinanceRemind
                        }
                        apiHttp(api.EDIT_REMIND, query, {itemId: this.$route.params.itemId}).then(ret => {
                            if (ret.resCode === STATUS_HTTP_SUCCESS) {
                                this.$message({
                                    message: '数据添加成功！',
                                    type: 'success',
                                    center: true
                                });
                                this.$emit('save')
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-title {
    font-size: 20px;
    padding-right: 30px;
}
.el-name {
    font-size: 14px;
}
.el-name .el-input {
    width: 30%;
}
.box-card {
    margin-left: 90px;
    height: 100px;
    overflow: hidden;
    overflow-y: auto;
}
.inner-box {
    margin-top: 20px;
    height: 160px;
    text-align: center;
    line-height: 120px;
}
.el-tip p {
    text-align: center;
    font-size: 14px;
    color: #999;
}
.el-choose {
    background: lightblue;
}
.el-nochoose {
    background: #ffffff;
}
.el-btn {
    padding: 11px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
</style>
